// 登陆

import React, { Component } from 'react'
import {
  InputItem
} from 'antd-mobile'

export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phone:"",
      code:"",
      loginType:"phone"
    }
  }
  onChangephone = (val)=>{
    this.setState({
      phone:val
    })
  }
  onChangecode = (val)=>{
    this.setState({
      code:val
    })
  }
  // 跳转注册页面
  toregister = ()=>{
    this.props.history.push("/register")
  }
  // 更改登录方式
  changeLoginType = (val)=> {
    this.setState({
      loginType:val
    })
  }
  // 跳转忘记密码页
  toForgetpassword = ()=> {
    this.props.history.push("/forgetpassword")
  }
  render() {
    let logincon,loginText;
    if(this.state.loginType == "phone"){
      logincon = (
        <div>
          <InputItem
            type="text"
            placeholder="输入手机号码"
            clear
            maxLength={11}
            onChange={this.onChangephone}
            value={this.state.phone}
            className="login-input"
          ></InputItem>
          <div className="posrelative">
            <InputItem
              type="text"
              placeholder="输入验证码"
              maxLength={11}
              onChange={this.onChangecode}
              value={this.state.code}
              className="login-input"
            ></InputItem>
            <span className="sendcode">获取验证码</span>
          </div>
        </div>
      )
      loginText = (
        <p className="account-text" onClick={this.changeLoginType.bind(this,'account')}>账号登录</p>
      )
    }else{
      logincon = (
        <div>
          <InputItem
            type="text"
            placeholder="输入手机号码"
            clear
            maxLength={11}
            onChange={this.onChangephone}
            value={this.state.phone}
            className="login-input"
          ></InputItem>
          <div className="posrelative">
            <InputItem
              type="text"
              placeholder="输入登录密码"
              maxLength={11}
              onChange={this.onChangecode}
              value={this.state.code}
              className="login-input"
            ></InputItem>
            <span className="sendcode" onClick={this.toForgetpassword}>忘记密码</span>
          </div>
        </div>
      )
      loginText = (
        <p className="account-text" onClick={this.changeLoginType.bind(this,'phone')}>手机号快捷登陆</p>
      )
    }
    return (
      <div className="login-wrap">
        <div className="login-header" onClick={this.toregister}>注册</div>
        {logincon}
        <div className="login-btn red-btn">登录</div>
        {loginText}
        <div className="other-wrap">
          <div className="liner"></div>
          <div className="other-title">
              <span>其他登录方式</span>
          </div>
        </div>
        <ul className="login-type">
          <li>
            <span className="app-icon icon-wechat" />
            <span>微信</span>
          </li>
          <li>
            <span className="app-icon icon-weibo" />
            <span>微博</span>
          </li>
          <li>
            <span className="app-icon icon-qq" id="qqLoginBtn" />
            <span>QQ</span>
          </li>
        </ul>
      </div>
    )
  }
}
